import {List, Row, Col, Button, Icon, Divider} from "antd";
import React, {Component} from 'react';

const doneData = [];
const waitData = [];
const timeoutData = [];

for (let i = 0; i < 23; i++) {
    doneData.push({
        name: `内容`,
        status: '2018-8-8',
        content: 'this is a test content'
    });

    waitData.push({
        name: `内容`,
        status: '2018-8-8',
        content: 'this is a test content'
    });

    timeoutData.push({
        name: `内容`,
        status: '2018-8-8',
        content: 'this is a test content'
    });
}

export default class AnnouncementList extends Component {
    state = {
        allThings: [],
    };

    render() {
        const title = (
            <Row type="flex" align="center" style={{marginTop: 16}}>
                <Col span={6}>
                    <h4>项目名</h4>
                </Col>
                <Col span={6}>
                    <h4>项目状态</h4>
                </Col>
                <Col span={12}>
                    <h4>事项概述</h4>
                </Col>
            </Row>
        );

        const divider = (
            <Divider style={{height: 1}}/>
        );

        return (
            <div>
                <h3 style={{margin: "16px 32px"}}>
                    已批示专报：
                    {title}
                    {divider}

                    <List
                        itemLayout="vertical"
                        size="small"
                        pagination={{
                            onChange: (page) => {
                                console.log(page);
                            },
                            pageSize: 3,
                        }}
                        dataSource={doneData}
                        renderItem={(item) => (
                            <Row type="flex" align="center">
                                <Col span={6}>
                                    <div>{item.name}</div>
                                </Col>
                                <Col span={6}>
                                    <div>{item.status}</div>
                                </Col>
                                <Col span={12}>
                                    <div>{item.content}</div>
                                </Col>
                                {divider}
                            </Row>
                        )}
                    />
                </h3>

                <h3 style={{margin: "16px 32px"}}>
                    待审核事项：
                    {title}
                    {divider}

                    <List
                        itemLayout="vertical"
                        size="small"
                        pagination={{
                            onChange: (page) => {
                                console.log(page);
                            },
                            pageSize: 3,
                        }}
                        dataSource={waitData}
                        renderItem={(item) => (
                            <Row type="flex" align="center">
                                <Col span={6}>
                                    <div>{item.name}</div>
                                </Col>
                                <Col span={6}>
                                    <div>{item.status}</div>
                                </Col>
                                <Col span={12}>
                                    <div>{item.content}</div>
                                </Col>
                                {divider}
                            </Row>
                        )}
                    />
                </h3>

                <h3 style={{margin: "16px 32px"}}>
                    即将逾期事项：
                    {title}
                    {divider}

                    <List
                        itemLayout="vertical"
                        size="small"
                        pagination={{
                            onChange: (page) => {
                                console.log(page);
                            },
                            pageSize: 3,
                        }}
                        dataSource={timeoutData}
                        renderItem={(item) => (
                            <Row type="flex" align="center">
                                <Col span={6}>
                                    <div>{item.name}</div>
                                </Col>
                                <Col span={6}>
                                    <div>{item.status}</div>
                                </Col>
                                <Col span={12}>
                                    <div>{item.content}</div>
                                </Col>
                                {divider}
                            </Row>
                        )}
                    />
                </h3>

            </div>
        );
    }
}
